<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:insert="~{common :: commomcss}"></head>
<body>
<!-- navbar-->
<div th:replace="~{common :: commonheader}"></div>
<div class="d-flex align-items-stretch">
  <div id="sidebar" class="sidebar py-3">
    <ul th:insert="~{common :: siderul}"></ul>
  </div>
  <div class="page-holder w-100 d-flex flex-wrap">
    <div class="container-fluid px-xl-5">
      <section class="py-5">
        <div class="row">
          <!-- Form Elements -->
          <div class="col-lg-12 mb-5">
            <div class="card">
              <div class="card-header">
                <h3 class="h6 text-uppercase mb-0">发布作业</h3>
              </div>
              <div class="card-body">
                <!--布置作业的富文本框-->
                <form class="form-horizontal" method="post" th:action="@{/teacher/publish}" enctype="multipart/form-data">
                  <div class="form-group row">
                    <div class="col-md-12">
                      <div id="editor" >
                        <p><b>请输入作业要求</b></p>
                      </div>
                    </div>
                  </div>
                  <div class="form-group row" style="visibility: hidden">
                        <div class="col-md-12">
                            <textarea id="text1" name="content"></textarea>
                        </div>
                  </div>

                  <!--<button id="btn1">获取html</button>-->
                  <div class="line"></div>
                  <!--上传作业附件-->
                  <div class="form-group row">
                    <label class="col-md-3 form-control-label">若作业要求中包含附件 请点击左侧<small class="text-primary"> Browse </small>选中该压缩附件</label>
                    <div class="col-md-9">
                      <div class="custom-file">
                        <input type="file" class="custom-file-input" name="file">
                        <!--<label class="custom-file-label" for="inputGroupFile01">请选择文件</label>-->
                        <label class="custom-file-label">请选择文件</label>
                      </div>
                    </div>
                  </div>

                  <!--设定作业截取时间-->
                  <div class="line"></div>
                  <div class="form-group row">
                    <label class="col-md-3 form-control-label">作业截取时间</label>
                    <div class="col-md-9">
                      <input type="text" id="time" class="form-control" name="deadline">
                    </div>
                  </div>
                  <div class="line"></div>
                  <div class="form-group row">
                    <div class="col-md-8 ml-auto">
                      <button type="submit" class="btn btn-secondary">取消</button>
                      <button type="submit" class="btn btn-primary">发布</button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>
<!-- JavaScript files-->
<div th:insert="~{common :: commomjs}"></div>
<!--日期选择器需要的JS和CSS-->
<script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<!-- 富文本框所需要的JS文件-->
<script type="text/javascript" th:src="@{/assert/js/wangEditor.min.js}"></script>
<!--上传文件所需JS-->
<script type="text/javascript" th:src="@{/assert/dist/bs-custom-file-input.js}"></script>
<script type="text/javascript">
  var E = window.wangEditor;
  var editor = new E('#editor');
  var $text1 = $('#text1');
  editor.customConfig.onchange = function(html){
    $text1.val(html);
  };
  editor.create();
  $text1.val(editor.txt.html());
</script>
<!--日期选择器-->
<script>
  $('#time').datetimepicker({ footer: true, modal: true });
</script>
</body>
<!--文件上传-->
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function() {
    bsCustomFileInput.init()
    var btn = document.getElementById('btnResetForm')
    var form = document.querySelector('form')
    btn.addEventListener('click', function () {
      form.reset()
    })
  });
</script>
</html>